<template>
  <div class="content">
    <div class="head-box">
      <div class="title-box">安居客</div>
    </div>
    <div class="loginInfo">
      <div class="username">
        <input type="text" placeholder="请输入用户名" v-model="loginInfo.userName" />
      </div>
      <div class="password">
        <input type="password" placeholder="请输入密码" v-model="loginInfo.password" />
      </div>
      <div class="loginbtn" @click="toMine">点击登录</div>
    </div>
    <div class="updata-box">
      <span class="reister-box" @click="toRegister">点击注册</span>
      <span class="reister-box" @click="toGetPassword">忘记密码</span>
    </div>
    <div class="backMine" @click="backMine">
      <van-icon name="arrow-left" />
    </div>
  </div>
</template>

<script>
import { isEmpty } from "common/utils"; //是空
import { Login } from "network/login";

import { mapMutations, mapState } from "vuex";

export default {
  name: "login",
  data() {
    return {
      loginInfo: {
        userName: "",
        password: "",
      },
    };
  },
  methods: {
    ...mapMutations({
      getNickName: "moduleUser/getNickName",
      getId: "moduleUser/getId",
      getHeader: "moduleUser/getHeader",
      getBirthday: "moduleUser/getBirthday",
      getEmail: "moduleUser/getEmail",
      getGender: "moduleUser/getGender",
      getTelPhone: "moduleUser/getTelPhone",
      getUserName: "moduleUser/getUserName",
      isBackToFalse: "moduleUser/isBackToFalse",
    }),
    toMine() {
      let { userName, password } = this.loginInfo;
      if (isEmpty(userName, password)) {
        this.$toast({
          message: "用户名或密码不能为空",
          position: "bottom",
        });
      } else {
        Login(this.loginInfo).then((res) => {
          console.log(res);
          if (res.code == 200) {
            let {
              id,
              userName,
              nickName,
              header,
              telPhone,
              email,
              birthday,
              gender,
            } = res.data.user;
            localStorage.setItem("userId", id);
            localStorage.setItem("header", header);
            localStorage.setItem("userName", userName);
            localStorage.setItem("telPhone", telPhone);
            localStorage.setItem("email", email);
            localStorage.setItem("birthday", birthday);
            localStorage.setItem("gender", gender);
            localStorage.setItem("nickName", nickName);
            localStorage.setItem("token", res.data.token);
            //传入vuex中
            this.getNickName(nickName);
            this.getId(id);
            this.getHeader(header);
            this.getBirthday(birthday);
            this.getEmail(email);
            this.getGender(gender);
            this.getTelPhone(telPhone);
            this.getUserName(userName);

            this.$toast({
              message: "登录成功",
              position: "bottom",
            });

            if (this.isBack) {
              this.$router.push("/mine");
            } else {
              this.$router.back();
            }
            this.isBackToFalse();
          } else if ((res.code = 404)) {
            this.$toast({
              message: "用户名或密码错误",
              position: "bottom",
            });
          } else {
            this.$toast({
              message: "服务器内部错误",
              position: "bottom",
            });
          }
        });
      }
    },
    toRegister() {
      this.$router.push("/register");
    },
    backMine() {
      this.$router.push("/mine");
      // this.$router.back()
    },
    toGetPassword() {
      this.$router.push("/getpassword");
    },
  },
  computed: {
    ...mapState({
      isBack: (state) => state.moduleUser.isBack,
    }),
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  position: relative;
}
.head-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  background-color: #ff5654;
}
.title-box {
  font-size: 50px;
  color: #fff;
}
.loginInfo {
  display: flex;
  flex-direction: column;
  height: 180px;
  justify-content: space-around;
  align-items: center;
  margin-top: 45px;
}
.username,
.password {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  font-size: 18px;
}
.username input,
.password input {
  height: 30px;
  width: 270px;
  border: none;
  border-bottom: 1px solid #ff5654;
  font-size: 14px;
  text-indent: 10px;
}
.loginbtn {
  height: 40px;
  width: 280px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  background-color: #ff5654;
  color: #fff;
  border-radius: 40px;
  font-weight: 700;
}
.updata-box {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 35px;
}
.reister-box {
  text-align: right;
  width: 70px;
  margin-right: 5px;
  font-size: 14px;
}
.reister-box span:nth-child(1) {
  margin-right: 15px;
}
.backMine {
  position: absolute;
  top: 0;
  left: 0x;
  padding: 10px;
  padding-left: 10px;
  font-size: 25px;
  color: #fff;
}
</style>